<template>
  <div class="main">
   <!-- 导航栏 -->
    <Header/>
    <div class="topContainer">

      <!-- 轮播图 -->
      <el-carousel trigger="click" height="466px">
        <el-carousel-item v-for="(item,index) in swiperData" :key="item.id">
          <a :href="item.link"><img
            :src="item.appAdvertiseUrl"
            alt=""
            style="width: 1200px; height: 466px"
          /></a>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 中部导航及内容 -->
    <div class="bottomContainer">
        <div class="channel">
            <!-- 中间导航 -->
      <div class="channel_list">
        <!-- 中间导航区域 -->
        <div class="channel_scroll" >
          <router-link class="channel_item active" to="/home/recommend">推荐</router-link>
          <router-link class="channel_item" to="/home/origin">作品</router-link>
          <div class="channel_item">教程</div>
          <div class="channel_item">专题</div>
          <div class="channel_item">动态</div>
          <div class="channel_item">关注</div>
        </div>
        <div class="channel_item right_item" @click="toInterest">
          <svg
            t="1666083241107"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="46202"
            width="20"
            height="20"
          >
            <path
              d="M270.773557 0H177.982619C80.092178 0 0 80.092178 0 178.082609v92.790939C0 368.763988 80.092178 448.956157 178.082609 448.956157h92.790939c97.89044 0 178.082609-80.092178 178.082609-178.082609v-92.790939C448.856166 80.092178 368.763988 0 270.773557 0z m96.490577 270.773557c0 53.194805-43.295772 96.490577-96.490577 96.490577H177.982619c-53.194805 0-96.490577-43.295772-96.490577-96.490577V177.982619c0-53.194805 43.295772-96.490577 96.490577-96.490577h92.790938c53.194805 0 96.490577 43.295772 96.490577 96.490577v92.790938zM673.534225 390.96182c34.596621 34.596621 80.292159 51.894932 125.887706 51.894932 45.595547 0 91.291085-17.298311 125.887707-51.894932l40.596035-40.596035c69.293233-69.293233 69.293233-182.58217 0-251.875403L925.409628 57.994336c-34.696612-34.696612-80.292159-51.994922-125.987697-51.994922-45.595547 0-91.291085 17.298311-125.887706 51.994922L632.93819 98.490382c-69.293233 69.293233-69.293233 182.58217 0 251.875403l40.596035 40.596035zM695.932038 161.48423l40.596035-40.596035c16.698369-16.698369 38.996192-25.897471 62.993849-25.897471 23.897666 0 46.295479 9.199102 62.993848 25.897471l40.596035 40.596035c34.696612 34.696612 34.696612 91.191095 0 125.887706L862.41578 327.967972c-16.698369 16.698369-38.996192 25.897471-62.993849 25.897471-23.897666 0-46.295479-9.199102-62.993848-25.897471L695.932038 287.371936c-34.696612-34.696612-34.696612-91.191095 0-125.887706zM270.773557 575.043843H177.982619c-97.89044 0-177.982619 80.092178-177.982619 178.082609V845.917391c0 97.89044 80.092178 177.982619 178.082609 177.982619h92.790939c97.89044 0 178.082609-80.092178 178.082609-178.082609v-92.790939c-0.09999-97.89044-80.192169-177.982619-178.1826-177.982619z m96.490577 270.773558c0 53.194805-43.295772 96.490577-96.490577 96.490577H177.982619c-53.194805 0-96.490577-43.295772-96.490577-96.490577v-92.790939c0-53.194805 43.295772-96.490577 96.490577-96.490577h92.790938c53.194805 0 96.490577 43.295772 96.490577 96.490577v92.790939zM845.817401 575.043843h-92.790939c-97.89044 0-178.082609 80.092178-178.082609 178.082609V845.917391c0 97.89044 80.092178 178.082609 178.082609 178.082609h92.790939c97.89044 0 178.082609-80.092178 178.082609-178.082609v-92.790939c0-97.990431-80.092178-178.082609-178.082609-178.082609z m96.490577 270.773558c0 53.194805-43.295772 96.490577-96.490577 96.490577h-92.790939c-53.194805 0-96.490577-43.295772-96.490577-96.490577v-92.790939c0-53.194805 43.295772-96.490577 96.490577-96.490577h92.790939c53.194805 0 96.490577 43.295772 96.490577 96.490577v92.790939z"
              p-id="46203"
              fill="#8a8a8a"
            ></path>
          </svg>
          <span>选择兴趣技能</span>
         
        </div>
        <el-dialog v-model="dialogVisible"  width='81%' class="dialog">
            <template #header="{  titleId, titleClass }">
              <div class="my-header">
                <div :id="titleId" :class="titleClass" style="font-size:18px;">选择我的兴趣技能 <span> 0 / 7</span></div>
                <p title="titleId">例如舞蹈就选舞种</p>
              </div>
            </template>
           <el-form  ref="form"  :inline="false" size="normal" style="position:relative">
            <el-form-item style="width:900px">
              <el-col :span="8" :offset="0" style="margin-right:10px">
                <el-input v-model="input2" size="large"  placeholder="搜索兴趣技能"  >
                  <template #prefix>
                    <svg t="1666172400707" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2728" width="17" height="17"><path d="M965.584 875.383 816.143 726.098c45.71-66.597 72.476-147.305 72.476-234.326 0-228.013-183.973-412.948-410.872-412.948-226.96 0-410.938 184.935-410.938 412.949 0 110.939 43.51 211.659 114.308 285.868l62.939-76.702c-48.248-55.664-77.476-128.422-77.476-208.052 0-175.033 141.178-316.891 315.281-316.891 174.137 0 315.315 141.858 315.315 316.891 0 98.666-44.862 186.791-115.2 244.907-19.407 16.036-40.755 29.786-63.635 40.844-41.299 19.957-87.591 31.139-136.48 31.139-22.664 0-44.763-2.424-66.072-6.992l-33.366 90.882c30.593 7.303 62.508 11.178 95.324 11.178 67.393 0 130.998-16.356 187.132-45.286 28.31-14.589 54.72-32.376 78.758-52.875l145.355 145.323c14.543 14.481 40.2 12.502 57.001-4.208l15.351-15.35C978.15 915.613 980.067 889.865 965.584 875.383z" p-id="2729" fill="#7d8090"></path></svg>
                  </template>
                </el-input>
              </el-col>
              <el-button size="large" style="background-color:#f5f7f9;border:none;color:#7d8090;">搜索</el-button>
            </el-form-item>
            <div class="choosed">

            </div>
            <div style="margin-bottom:20px">推荐兴趣技能</div>
            <el-form-item >
              <el-scrollbar height="300px">
                <tag  class="scrollbar-demo-item" v-for="(item,index) in interest" :key="index">{{item.name}}</tag>
               
              </el-scrollbar>
            </el-form-item>
            
           </el-form>
           <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary">确认</el-button
        >
      </span>
    </template>
        </el-dialog>
       
      </div>
        </div>
      <!-- 列表 -->
      <div class="content">
        <router-view></router-view>
        <!-- <recommend/> -->
      </div>
    </div>
    <!-- 底部 -->
    <Footer/>
  </div>
</template>

<script setup lang="ts">
// 引入组件
import Header from '../../components/header/header.vue'
import Footer from '../../components/footer/footer.vue'
// import recommed from './recommend/recommend.vue'
import { ref,onMounted, reactive } from "vue";
import request from '../../utils/request'
import { reqGetSwiperData } from '../../api/home/home'
import { Calendar, Search } from '@element-plus/icons-vue'
// 轮播图数据
const swiperData = ref([])
// 控制dialog显示与隐藏
const dialogVisible = ref(false)
const input2 = ref('')
// 兴趣技能假数据，未来请求数据后要改
let interest = reactive([
  {
  "name": "爵士舞",
  "id": "402881ed649d628e01649d636ea70057",
  "groupType": "avocation"
  },
  {
  "name": "民族舞",
  "id": "402881ed649d628e01649d636ea7005a",
  "groupType": "avocation"
  },
  {
  "name": "中国舞",
  "id": "ff80808167bef94f0167bf6f6e0a1fd2",
  "groupType": "avocation"
  },
  {
  "name": "街舞",
  "id": "402881ed649d628e01649d636ea60056",
  "groupType": "avocation"
  }
  

])
// 页面加载时
onMounted(() => {
    getSwiperData()
});
// 获取轮播图数据
const getSwiperData = async ()=>{
    let result = await reqGetSwiperData();
    swiperData.value = result.data
    
}
// 兴趣技能choosed点击事件
const choosed = (event:any)=>{
  // console.log(event.target.id);
  
}

// 选择兴趣技能按钮
const toInterest = () => {
    // 显示dialog
    dialogVisible.value = true
};
</script>

<style scoped>
.main {
  height: 100%;
}

.topContainer {
  width: 1200px;
  margin: 20px auto 0;
  /* height: 1200px; */
}

>>>.el-carousel__button {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
}

.list {
  height: 100%;
}

.channel {
  background-color: #fff;
  position: sticky;
  top: 0;
  z-index: 1;
}

.channel_list {
  position: relative;
  /* background-color: pink; */
  /* position: sticky;
  top: 0; */
  width: 1200px;
  margin: 0 auto;
  z-index: 999;
}

.channel_scroll {
  width: 45%;
  height: 80px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.channel_item {
  font-size: 16px;
  line-height: 80px;
  color: #7d8090;
}

.channel_item:hover {
  color: black;
  cursor: pointer;
}

.channel_item.active {
  border-bottom: 2px solid black;
  margin-bottom: 10px;
  box-sizing: border-box;
  color: black;
}

.channel_item.right_item {
  position: absolute;
  top: 0;
  right: 0;
  vertical-align: top;
  box-sizing: border-box;
}

.channel_item svg {
  padding-top: 30px;
}

.channel_item.right_item span {
  height: 80px;
  line-height: 80px;
  vertical-align: top;
  margin-left: 5px;
  color: #7d8090;
}

.content {
  background-color: #f5f7f9;
  height: 1000px;
  /* min-width: 5000px; */
}

/* dialog样式 */
.my-header {
  margin: 10px 0 0 5px;
}

.my-header p {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: 14px;
  color: #b2b5c1;
}

.channel_modal .el-input--small .el-input__inner {
  height: 40px;
  line-height: 40px;
  background-color: #f5f7f9;
}

/* .search{
    background-color: #eee;
} */
 >>>.el-dialog__body{
    padding: 10px 20px 0;
}
>>>.el-input--large .el-input__wrapper{
 background-color: #f5f7f9;
}
/* scrollBar */
.scrollbar-demo-item{
  min-width: 100px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    border-radius: 4px;
    border: 1px solid #eaecf0;
    color: #111;
    background-color: #fff;
    cursor: pointer;
    margin: 0 22px 21px 0;
    display: inline-block;
    font-size: 12px;
    position: relative;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
>>>.el-dialog__footer{
  padding-top:0;
}
>>>.el-dialog__footer .el-button{
  width: 130px;
  height: 40px;
  display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    border-color: #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    padding: 12px 20px;
    font-size: 12px;
    border-radius: 4px;
    
}
>>>.el-dialog__footer .el-button span{
  letter-spacing: 3px;
}
>>>.el-dialog__footer .el-button--primary{
  color: #fff;
  background-color: #f93684;
  border-color: #f93684;
}
</style>